<template>
    <div id="stuLeave">
        请假类型 <el-select v-model="leaveTypeName" placeholder="请选择" clearable @click.native="getSysLeaveTypeAll" @change="handleSelectChange">
                    <el-option v-for="sysLeaveType in sysLeaveTypeList" :key="sysLeaveType.id" :label="sysLeaveType.leaveTypeName" :value="sysLeaveType.id">
                        {{ sysLeaveType.leaveTypeName }}
                    </el-option>
                </el-select>
        请假时间 <el-date-picker v-model="createDate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
        申请单编号 <el-input v-model="applicationNumber" placeholder="请输入申请单编号" clearable style="width: 200px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button @click="reset"><i class="el-icon-refresh">重置</i></el-button>
        
        <el-row>
            <br>
            <el-col :span="15">
                <el-button type="primary" style="font-size: 15px;height: 35px;" @click.native="addLeaveValue"><i class="el-icon-plus"></i> 创建请假申请</el-button>
            </el-col>
        </el-row>
        <br>
        <el-table :data="sysLeaveApplicationList" style="width: 100%">
            <el-table-column prop="applicationNumber" label="申请单编号" width="150"></el-table-column>
            <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
            <el-table-column prop="name" label="班级名称" width="120"></el-table-column>
            <el-table-column prop="startTime" label="请假开始时间" width="140"></el-table-column>
            <el-table-column prop="endTime" label="请假结束时间" width="140"></el-table-column>
            <el-table-column prop="leaveTypeName" label="请假类型" width="120"></el-table-column>
            <el-table-column prop="reason" label="请假原因" width="140"></el-table-column>
            <el-table-column prop="approver" label="当前审批人" width="130"></el-table-column>
            <el-table-column prop="status" label="申请单状态" width="120">
                <template slot-scope="scope">
                    {{ scope.row.status == 0 ? '待审批' : scope.row.status == 1 ? '撤销' : scope.row.status == 2 ? '已通过' : '未通过'}}
                </template>
            </el-table-column>
            <el-table-column prop="createDate" label="提交时间" width="140"></el-table-column>
            <el-table-column prop="leaveStatus" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button icon="el-icon-refresh-right" @click="del(scope.row.id)" v-if="scope.row.status == 0" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 30px;margin-left: 1150px;" v-if="pageCount>=1">
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
                <el-button><span>{{pageNum}} / {{pageCount}}</span></el-button>
                <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
        </div>
        <el-row v-if="addLeave">
            <el-dialog title="创建请假申请" :visible.sync="addLeave" width="60%">
                <el-form :model="form" label-width="100px" class="demo-ruleForm" style="height: 400px;">
                    <div style="display: flex; gap: 60px;margin-left: 100px;height: 80px;">
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            班级 
                            <el-select v-model="classId" placeholder="请选择" @click.native="getSysClass" @change="classSelectChange(classId)">
                                <el-option v-for="sysClass in sysClassList" :key="sysClass.id" :label="sysClass.name" :value="sysClass.id" >
                                    {{ sysClass.name }}
                                </el-option>
                            </el-select>
                            <span style="color: red;position: absolute;left: 160px;top: 125px;">{{ classIdError }}</span>
                        </div>
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            学生 <el-select v-model="studentName" placeholder="请选择" @click.native="getStuListByClassId" @change="stuSelectChange(studentName)">
                                    <el-option v-for="sysStudent in sysStudentList" :key="sysStudent.id" :label="sysStudent.studentName" :value="sysStudent.id">
                                        {{ sysStudent.studentName }}
                                    </el-option>
                                </el-select>
                                <span style="color: red;position: absolute;left: 630px;top: 125px;">{{ studentNameError }}</span>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 30px;height: 80px;">
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            请假开始时间 
                            <el-date-picker v-model="startTime" type="date" :picker-options="startPickerOptions" @change="calculateDays"
                               placeholder="选择开始日期时间">
                            </el-date-picker>
                            <span style="color: red;position: absolute;left: 150px;top: 209px;">{{ startTimeError }}</span>
                        </div>
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            请假结束时间 
                            <el-date-picker v-model="endTime" type="date" :picker-options="endPickerOptions" @change="calculateDays" 
                               placeholder="选择结束日期时间">
                            </el-date-picker>
                            <span style="color: red;position: absolute;left: 650px;top: 209px;">{{ endTimeError }}</span>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;height: 80px;margin-left: 50px;">
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            请假总天数 <el-input placeholder="请输入内容" v-model="totalDay" style="width: 230px;" :disabled="true">
                                     </el-input>
                                     <span style="color: red;position: absolute;left: 155px;top: 290px;">{{ totalDayError }}</span>
                        </div>
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            请假类型 <el-select v-model="leaveTypeName" placeholder="请选择" clearable @click.native="getSysLeaveTypeAll" @change="handleSelectChange">
                                        <el-option v-for="sysLeaveType in sysLeaveTypeList" :key="sysLeaveType.id" :label="sysLeaveType.leaveTypeName" :value="sysLeaveType.id">
                                            {{ sysLeaveType.leaveTypeName }}
                                        </el-option>
                                    </el-select>
                                    <span style="color: red;position: absolute;left: 630px;top: 290px;">{{ leaveTypeNameError }}</span>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;height: 80px;">
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            请假原因
                            <el-input type="textarea" v-model="reason" :autosize="{ minRows: 4, maxRows: 4}" placeholder="请输入内容" :style="{ width: '800px', resize: 'vertical' }"></el-input>
                            <span style="color: red;position: absolute;left: 90px;top: 420px;">{{ reasonError }}</span>
                        </div>
                        
                    </div>
                    <div style="display: flex;gap: 10px;position: absolute;right: 170px;bottom: 0;height: 50px;">
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="add">确 定</el-button>
                            <el-button @click="addLeave = false">取 消</el-button>
                        </span> 
                    </div>
                </el-form>
            </el-dialog>
        </el-row>
    </div>
</template>
<script>

    import axios from 'axios';
    export default {
        name: "stuLeave",
        data () {
            return {
                inputValue: '',
                suggestions: [],
                leaveTypeName:'',
                createDate:'',
                applicationNumber:'',
                sysLeaveApplicationList: [],
                pageNum: 1,
                pageSize: 5,
                pageCount: '',
                form: {},
                sysLeaveTypeList:[],
                addLeave:false,
                startTime: '',
                endTime: '',
                startPickerOptions: {
                    disabledDate(time) {
                    const today = new Date();
                    return time.getTime() < (today.getTime()-14*3600*1000*2);
                    }
                },
                endPickerOptions: {
                    disabledDate(time) {
                    const today = new Date();
                    return time.getTime() < (today.getTime()-14*3600*1000*2);
                    }
                },
                sysClassList:[],
                reason:'',
                classNameValue:null,
                sysStudentList:[],
                classId:'',
                studentName:'',
                totalDay:'',
                classIdError:'',
                studentNameError:'',
                startTimeError:'',
                endTimeError:'',
                totalDayError:'',
                leaveTypeNameError:'',
                reasonError:'',
                id:'',
            }
        
        },
        created () {
            console.log(this.pageNum);
            this.getSysLeaveApplicationList(1);
        },
        methods: {
            selectSuggestion(suggestion) {
                this.inputValue = suggestion;
                this.suggestions = [];
            },
            prevPage(){
                this.pageNum--;
                var pageNum = this.pageNum;
                if(this.pageNum >= 1){
                    this.getSysLeaveApplicationList(pageNum);
                }else{
                    this.getSysLeaveApplicationList(1);
                }   
            },
            nextPage(){
                this.pageNum++;
                var pageNum = this.pageNum;
                if(this.pageNum <= this.pageCount){
                    this.getSysLeaveApplicationList(pageNum);
                }else{
                    this.getSysLeaveApplicationList(this.pageCount);
                }                
            },
            getSysLeaveTypeAll(){
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/leaveType/getSysLeaveTypeAll',
                    method: 'post',
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysLeaveTypeList = response.data.data;
                    this.pageCount = response.data.pageCount;
                })
            },
            getSysLeaveApplicationList (pageNum) {
                console.log("通过创建时间查询："+this.createDate);
                this.pageNum = pageNum;
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/leaveApplication/getSysLeaveApplicationList',
                    method: 'post',
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        leaveTypeName: this.leaveTypeName,
                        applicationNumber: this.applicationNumber,
                        createDate: this.createDate
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysLeaveApplicationList = response.data.data.sysLeaveApplicationList;
                    this.pageNum = response.data.data.pageNum;
                    this.pageCount = response.data.data.pageCount;
                })
            },
            handleSelectChange(leaveTypeName){
                this.leaveTypeName = leaveTypeName;
            },
            classSelectChange(classId){
                this.classId = classId;
                console.log("选中的班级名称："+this.classId);
            },
            search(){
                let pageNum =this.pageNum;
                this.getSysLeaveApplicationList(pageNum);
            },
            reset(){
                this.leaveTypeName = '';
                this.createDate = '';
                this.applicationNumber = '';
                this.getSysLeaveApplicationList(1);
            },
            addLeaveValue(){
                this.classIdError='';
                this.studentNameError='';
                this.classId = '';
                this.studentName = '';
                this.reason = '';
                this.classIdError = '';
                this.studentNameError = '';
                this.endTimeError = '';
                this.startTimeError = '';
                this.totalDayError = '';
                this.leaveTypeNameError = '';
                this.reasonError = '';
                this.addLeave = true;
            },
            getSysClass(){
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/class/getSysClass',
                    method: 'post',
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysClassList = response.data.data;
                })
            },
            stuSelectChange(studentId){
                this.studentName = studentId;
                console.log("选中的学生学号："+this.studentName);
            },
            getStuListByClassId(){
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/student/getStuListByClassId',
                    method: 'post',
                    params: {
                        classId: this.classId
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                   this.sysStudentList = response.data.data;
                })
            },
            calculateDays() {
                if (this.startTime && this.endTime) {
                    const start = new Date(this.startTime);
                    const end = new Date(this.endTime);
                    const oneDay = 24 * 60 * 60 * 1000;
                    const diffDays = Math.floor((end.getTime() - start.getTime()) / oneDay) + 1;
                    this.totalDay = diffDays;
                } else {
                    this.totalDay = '';
                }
            },
            add(){
                if(this.classId == ''){
                    this.classIdError = '请选择班级';
                    return;
                }else{
                    this.classIdError = '';
                }
                if(this.studentName == ''){
                    this.studentNameError = '请选择学生';
                    return;
                }else{
                    this.studentNameError = '';
                }
                if(this.startTime == ''){
                    this.startTimeError = '请选择开始时间';
                    return;
                }else{
                    this.startTimeError = '';
                }
                if(this.endTime == ''){
                    this.endTimeError = '请选择结束时间';
                    return;
                }else{
                    this.endTimeError = '';
                }
                if(this.totalDay <1){
                    this.totalDayError = '请修改请假时间';
                    return;
                }else{
                    this.totalDayError = '';
                }
                if(this.leaveTypeName == ''){
                    this.leaveTypeNameError = '请选择请假类型';
                    return;
                }else{
                    this.leaveTypeNameError = '';
                }
                if(this.reason == ''){
                    this.reasonError = '请输入请假原因';
                    return;
                }else{
                    this.reasonError = '';
                }
                console.log("aaaa");
                console.log(this.leaveTypeName);
                console.log(this.studentName);
                console.log(this.startTime);
                console.log(this.endTime);
                console.log(this.leaveTypeName);
                console.log(this.totalDay);
                console.log(this.reason);
                console.log("bbbbb");
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const dateStr = `${year}${month}${day}`;
                // 生成6位随机数
                const randomNum = Math.floor(Math.random() * 900000 + 100000);
                const randomNumStr = randomNum.toString().padStart(6, '0');
                // 拼接前缀和日期、随机数得到请假编号
                const applicationNumber = `LE${dateStr}${randomNumStr}`;
                this.Authorization = localStorage.getItem("Authorization");
                
                axios({
                    url: 'http://localhost:9002/sys/leaveApplication/addSysLeaveApplication',
                    method: 'post',
                    data: {
                        applicationNumber:applicationNumber,
                        studentId:this.studentName,
                        classId:this.classId,
                        leaveTypeId:this.leaveTypeName,
                        startTime:this.startTime,
                        endTime:this.endTime,
                        totalDay:this.totalDay,
                        reason:this.reason
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    if(response.data.status == 200){
                        this.$message.success(response.data.msg);
                        this.leaveTypeName = '';
                        this.addLeave = false;
                        this.getSysLeaveApplicationList(1);
                    }else{
                        this.$message.error(response.data.msg);
                    }
                })
            },
            del(id){
                this.id = id;
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/leaveApplication/updSysLeaveApplication',
                    method: 'post',
                    params: {
                        id: this.id
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                
                })
                .then(response => {
                    console.log(response);
                    if(response.data.status == 200){
                        this.$message.success(response.data.msg);
                        this.getSysLeaveApplicationList(1);
                    }else{
                        this.$message.error(response.data.msg);
                    }
                })
            }
        }
    }
</script>